<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">卡片管理</view>
				<view class="return"></view>
			</view>
		</view>
		
		<view class="card_management">
			<view class="top_tab">
				<view v-for="(item,index) in tab_top" :key='index' @click="changeTab(index)" :class="currentIndex == index?'tab_active':'tab_item'">{{item.name}}</view>
			</view>
			
			<view class="brand_card" v-for="(item,index) in tab_top" :key='index' v-if="currentIndex == index">
				<view class="card_item" v-for="(item1,index1) in item.card" :key="index1" >
					
					<view class="card_img" @click="chooseCard(index1,item1)">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/list/ka2.png"></image>
						
						<view class="card_content">
							<view class="card_wrap">
								<view class="card_top">
									<view class="top_left">
										<view class="brand_icon">
											<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/mycenter/touxiang.png"></image>
										</view>
										<view class="brand_wrap">
											<view class="brand_name">{{item1.bank_name}}</view>
											<view class="brand_pinyin">{{item1.brand_pinyin}}</view>
											<view class="card_type">{{item1.card_name}}</view>
											
										</view>
									</view>
									<view class="top_right">{{item1.cardno}}</view>
									<view :class="currentIndex1 == index1?'tab_active':'tab_item'">
										
									</view>
								</view>
								<view class="card_bottom">每日转账支付限额{{item1.money}}元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 添加信用卡 -->
			<view class="addCard" @click="toAddBrandCard">
				<view class="add_wrap">
					<view class="add_left">+添加新银行卡</view>
					
					<view class="add_right">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/mycenter/right.png"></image>
					</view>
				</view>
				
			</view>
			<view class="check_card" @click="check_card">确定</view>
		</view>
	</view>
</template>

<script>
	export default {	
		data() {
			return {
				source:null,
				currentIndex:0,
				currentIndex1:null,
				souce:0,
				tab_top:[
					{
						name:'信用卡',
						card:[
							// {
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka1.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// }
						]
					},{
						name:'储蓄卡',
						card:[
							// {
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'储蓄卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka1.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'储蓄卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// }
						]
					}
				],
				xsouce:0,
				bank_num:'',
				xin:'',
				token:''
			}
		},
		onShow(){
			var options = this.Unfold_data.getCurPageOption();
			if(options.souce){
				this.souce = options.souce
				this.changeTab(this.souce)
			}else{
				this.changeTab(this.currentIndex)
			}
			if(options.xsouce){
				this.xsouce = options.xsouce;
			}
			//赋值source
			if(options.source){
				this.source = options.source
			}
		},
		onLoad(options){
			this.token=options.token
			this.shop_id=options.shop_id
		},
		methods: {
			//跳转上一页
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			   },
			   //分类获取银行卡列表
			changeTab(index){
				this.currentIndex = index;
				//判断是否是选择信用卡
				if(index==1){
					this.Unfold_data.showWindow('只能选择信用卡');
					this.currentIndex = 0;
					return;
				}
				
				// var userInfo = uni.getStorageSync('userInfo');
				let params={
					token:this.token
				};
					
				var url ='/api/bankcard/bankcard/creditCardList'
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					// console.log(res);
					if (res.statusCode == 200 && res.data.code == 1) {
						// 成功跳转下载页面
						// this.tab_top = res.data.data
						this.tab_top[0].card =res.data.data.creditCard 
						this.tab_top[1].card =res.data.data.depositCard
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			toAddBrandCard(){
				
				uni.navigateTo({
					url:'/pages/addBrandCard/addBrandCard?souce='+this.currentIndex+'&source=xin'+'&token='+this.token
				})
			},
			// defaulta(item){
			// 	//默认银行卡
			// 		// this.default = 1;
			// 		let params ={
			// 			id:item.id
			// 		};
			// 		var url = '/api/api/bankcard/bankcard/setdefault'
			// 		this.Unfold_data.upload_data(params, 'POST', url, res => {
			// 			// console.log(res);
			// 			if (res.statusCode == 200 && res.data.code == 1) {
			// 				// 成功跳转下载页面
			// 				this.Unfold_data.showWindow(res.data.msg);
			// 				if(this.xsouce==1){
			// 					setTimeout(function() {
			// 						uni.navigateBack({
			// 							delta:1
			// 						})
			// 					}, 1000);
			// 				}
			// 			} else {
			// 				this.Unfold_data.showWindow(res.data.msg);
			// 			}
			// 		});
			// },
			//选中卡片
			chooseCard(index,item1){
				this.currentIndex1 = index
			},
			check_card(){
				//将选中的卡片存入缓存
				uni.setStorageSync('data',this.tab_top[this.currentIndex].card[this.currentIndex1])
				if(this.source=="xin"){
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import  '../card_check/card_check'
</style>
